<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/pic.css"/>
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/swiper.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
    <style type="text/css">
    	
    </style>
    <script type="text/javascript" charset="utf-8">
      	mui.init({
      		swipeBack:true
      	});
    </script>
</head>
<body>
	 <div class="musi musi1" style="position: absolute;top: 10%;right: 10%;width: 50px;height: 50px;background: url(img/timg.jpg);background-size: 100% 100%;border-radius: 50%;z-index: 50"><audio src='img/music.mp3' autoplay="autoplay" loop="loop"></audio></div>
     <div class="swiper-container" style="width: 100%;height: 100%;margin: 0;padding: 0;">
        <div class="swiper-wrapper" style="width: 100%;height: 100%;">
            <div class="swiper-slide" style="width: 100%;height: 100%;">
            <embed width="200" height="200" border="0" src="img/music.mp3" hidden="true" autostart="ture" loop="ture"></embed>

                <div class="ani msgpic" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.6s"><img src="img/1477221903118.jpg"></div>
                <div class="ani imgpic" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="1.4s"><img src="img/1477221904384.jpg"></div>
                <div class="ani penpic" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="2.3s"><img src="img/1477221904666.jpg"></div>
                 <div class="ani msgfont" swiper-animate-effect="rollIn" swiper-animate-duration="1.5s" swiper-animate-delay="2.7s"><p style="color: red;font-size: 25px;line-height: 32px;">简历亲启</p></div>
                 <div class="ani backgroundpic" swiper-animate-effect="fadeIn" swiper-animate-duration="4.5s" swiper-animate-delay="0.5s"><img src="img/1477221904877.jpg"></div>	
                 <p class="ani msgfont2" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="3s">请慢用</p>
                 <p class="ani msgfont3" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="4s">故事即将开始</p>
            </div>



            <div class="swiper-slide" style="width: 100%;height: 100%;">
            <p class="ani fontmsg" swiper-animate-effect="fadeOut" swiper-animate-duration="2.3s" swiper-animate-delay="0.1s">故事的开始总会有一段旅程</p>	
               <div class="ani backgroundpic" swiper-animate-effect="fadeIn" swiper-animate-duration="4.5s" swiper-animate-delay="0.5s"><img src="img/1477221904877.jpg"></div>	
               <div class="ani fontmsg2" swiper-animate-effect="rollIn" swiper-animate-duration="1.5s" swiper-animate-delay="1.5s"><p class="ani" swiper-animate-effect="rollOut" swiper-animate-duration="1.5s" swiper-animate-delay="5.5s">Vic</p>	</div>

               <div class="ani backpic" swiper-animate-effect="fadeIn" swiper-animate-duration="3.5s" swiper-animate-delay="2.3s"><img src="img/1477221904454.jpg"></div>	
               <div class="ani minpic" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="3s" swiper-animate-delay="1.5s"><img src="img/1477221904735.jpg"></div>
               <div class="ani thefont1" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="1.5s" swiper-animate-delay="2s">本人自学能力强,工作积极心细</div>
               <div class="ani thefont2" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="1.5s" swiper-animate-delay="3s">具有良好的团队合作精神</div>
               <div class="ani thefont3" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="1.5s" swiper-animate-delay="4s">敢于挑战自我,按质按量的完成任务</div>
               <div class="ani minpic2" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="3s" swiper-animate-delay="2.5s"><img src="img/1477221904735.jpg"></div>
               <div class="ani minpic3" swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="3s" swiper-animate-delay="3.5s"><img src="img/1477221904735.jpg"></div>
            </div>





            <div class="swiper-slide" style="width: 100%;height: 100%;">
             <p class="ani msgbackground" swiper-animate-effect="fadeOut" swiper-animate-duration="2.3s" swiper-animate-delay="0.1s" >回想当初，再看现在</p>	
               <div class="ani backgroundpic" swiper-animate-effect="fadeIn" swiper-animate-duration="4.5s" swiper-animate-delay="0.5s"><img src="img/1477221904877.jpg"></div>
               <div class="ani the3font1" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="1.5s" swiper-animate-delay="2s">我坚信</div>
               <div class="ani the3font2" swiper-animate-effect="rotateInUpRight" swiper-animate-duration="1.5s" swiper-animate-delay="2s">只有胜利才能生存，只有成功才有代价，只有耕耘才有收获。</div>
                
                <div class="ani backgroundpic3" swiper-animate-effect="fadeInLeft" swiper-animate-duration="4.5s" swiper-animate-delay="1.5s"><img src="img/1477221905695.jpg"></div>
            	<div class="btn"><button id="enter">进<br/>入<br/>体<br/>验</button></div>
            </div>
           
        </div>
    </div>
       
        <!-- Add Pagination -->
        
    </div>
	
	<!--Mui 所做的页面-->
	<div id="mainContent">
		
		<div id= "bcid" ></div>
		<div id="tuiChu" style="position: absolute;bottom: 10%;left: 0;right: 0;margin: 0 auto;width: 50px;height: 50px;opacity: 0.5;color: white;font-size: 25px;line-height: 50px;text-align: center;z-index: 200;background: greenyellow;display: none;border-radius: 50%;">
			退出
		</div>
	<header class="mui-bar mui-bar-nav">
			<a id="a1" class="mui-icon mui-icon-camera" onclick="captureImage()"></a>
			<h1 class="mui-title" >My resume</h1>
			<a id="a2" class="mui-icon mui-icon-videocam mui-pull-right" onclick="erweima();"></a>
			
		</header>
		
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">技能</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-flag"></span>
				<span class="mui-tab-label">经历</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-star"></span>
				<span class="mui-tab-label">项目</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">个人简介</span>
			</a>
		</nav>
		
		<div class="mui-scroll-wrapper">
			<div class="mui-scroll">
				
		<div class="mui-content">
			<div id="tabbar" class="mui-control-content mui-active">
				<div class="title">我的技能</div>
				<ul id="press" class="mui-table-view">
					<li id="liCollapse" class="mui-table-view-cell mui-collapse" style="display: none;">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="./img/timg.jpg">
							<div class="mui-media-body">
								<span id="spanI">
									
								</span>
								<p class='mui-ellipsis' id="spanD"></p>
							</div>
						</a>
						<div class="mui-collapse-content" style="font-size: 14px;">
							<form class="mui-input-group">
								<div class="mui-table-view-cell">
									<label>了解：</label>
									<span id="span1">
										
									</span>
									
								</div>
								<div class="mui-table-view-cell">
									<label>熟悉程度：</label>
									<span id="span2">
										
									</span>
									
								</div>
		
								<div class="mui-table-view-cell">
									<label>掌握时间：</label>
									<span id="span3">
										
									</span>
									
								</div>
								<div class="mui-table-view-cell">
									<label>具体内容：</label>
									<span id="span4">
										
									</span>
									
								</div>
							</form>
						</div>
					</li>
					
					
					
				

				</ul>
			
			</div>
			<div id="tabbar-with-chat" class="mui-control-content">
				<div class="title">学习及工作经历</div>
				<div class="mui-content">
					<ul class="mui-table-view" style="border-radius: 10px 10px 50px 10px;">
						<li class="mui-table-view-cell mui-media" style="height: 100px;">
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-right" src="img/logo.jpg">
							<div class="mui-media-body">
								成都理工大学工程技术学院
								<p class='mui-ellipsis'>2016/6</p>
							</div>
						</a>
				 <li class="mui-table-view-cell"style="margin-top: 10px;font-size: 13px;font-family: '微软雅黑';">专业：电子商务</li>
						</li>
						<li class="mui-table-view-cell mui-media" style="height: 200px;width: 100%;"><img src="img/banner.jpg" style="height: 100%;width: 100%;"></li>
				</ul>
					<div class="mui-content">
			<div class="mui-content-padded">
				<p>曾就职于成都商途天下科技有限公司</p>
				<p>公司性质：私营企业</p>
				<p>在职时间：2015年-2016年</p>
				<p>职位：</p>
				<p>技术伙伴：30</p>
				<p>参与项目：珍诚医药等</p>
				<p>
					<img src="./img/pic2.jpg" data-preview-src="img/pic1.jpg" data-preview-group="1" />
				</p>
				<p>公司概况图</p>
				<p>
					<img src="./img/pic2.jpg" data-preview-src="./img/pic2.jpg" data-preview-group="1" />
				</p>
				<p> </p>
				<p>
					<img src="./img/pic2.jpg" data-preview-src="./img/pic3.jpg" data-preview-group="1" />
				</p>
			</div>
		</div>
				</div>
				
				
			</div>
			
			<div id="tabbar-with-contact" class="mui-control-content">
				<div class="title">参与的项目</div>
				<div id="pullsex">
					
				
				<div id="poll" class="mui-card" style="display: none;">
				<div id="poll1" class="mui-card-header mui-card-media" style="height:40vw;width: 100%;"><img src="img/fon.jpg" style="width: 100%;height: 100%;"></div>
				<div class="mui-card-content" style="padding: 10px;">
					<div class="mui-card-content-inner">
						
						<p id="poll2"></p>
						<p id="poll3" style="color: #333;"></p>
						<p id="poll4"></p>
						<p id="poll5"></p>
						<p id="poll6"></p>
					</div>
				</div>
				<div class="mui-card-footer" style="padding: 10px;">
					<a class="mui-card-link" id="poll7"></a>
					
				</div>
			</div>
				
			</div>
			</div>
			<div id="tabbar-with-map" class="mui-control-content mui-content">
				<div class="title">自我介绍</div>
			
				<div class="mui-content">
			
			<ul class="mui-table-view" >
				<li class="mui-table-view-cell" >
						<a href="javascript:;">
							<img class="mui-media-object mui-pull-left" src="img/msg.jpg">
							<div class="mui-media-body"><p class='mui-ellipsis'>姓名</p>
								曾浩然
							</div>
						</a>
						
				</li>
				 <li class="mui-table-view-cell">
				 	<span>出生日期：</span><span>1994.07.07</span>
				 </li>
		         <li class="mui-table-view-cell"><span>兴趣：</span><span>爱打羽毛球，运动</span></li>
		         <li class="mui-table-view-cell"><span>住址：</span><span>高新西区</span></li>
		          <li class="mui-table-view-cell"><span>phone：</span><span>13032817179</span></li>
		          <li class="mui-table-view-cell"><span>邮箱：</span><span>503959717@qq.com</span></li>
		         <li class="mui-table-view-cell"><span>婚恋情况：</span><span>单身</span></li>
			</ul>
			
			<ul class="mui-table-view" style="margin-top: 35px;">
			<li class="mui-table-view-cell mui-collapse">
						<a class="mui-navigate-right" href="#">个人成果展示</a>
						<div class="mui-collapse-content">
							<div id="slider" class="mui-slider">
								<div class="mui-slider-group mui-slider-loop">
									<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
									<div class="mui-slider-item mui-slider-item-duplicate">
										<a href="#">
											<img src="img/banners.png">
										</a>
									</div>
									<!-- 第一张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="img/products.png">
										</a>
									</div>
									<!-- 第二张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="img/single.png">
										</a>
									</div>
									<!-- 第三张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="img/banners.png">
										</a>
									</div>
									<!-- 第四张 -->
									<div class="mui-slider-item">
										<a href="#">
											<img src="img/products.png">
										</a>
									</div>
									<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
									<div class="mui-slider-item mui-slider-item-duplicate">
										<a href="#">
											<img src="img/single.png">
										</a>
									</div>
								</div>
								<div class="mui-slider-indicator">
									<div class="mui-indicator mui-active"></div>
									<div class="mui-indicator"></div>
									<div class="mui-indicator"></div>
									<div class="mui-indicator"></div>
								</div>
							</div>
						</div>
					</li>
					
					</ul>
				
					</div>
</div>		
					
		</div>
		</div>
	
	<script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		
		mui('.mui-scroll-wrapper').scroll({
			bounce: true,
		});
		mui.previewImage();
	</script>
</body>
</html>